<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts';
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '350px'
			},
			autoResize: {
				type: Boolean,
				default: true
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				chart: null,
				eChartsTimer: null,
				index: 0,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.initChart();
				}
			}
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		destroyed() {
			clearInterval(this.eChartsTimer);
		},
		methods: {
			initChart() {
				clearInterval(this.eChartsTimer);
				this.chart = echarts.init(this.$el, 'macarons')
				this.index = 0;
				this.eChartsTimer = null;
				this.setOptions(this.chartData)
			},
			setOptions() {
				this.chart.setOption({
					xAxis: {
						data: this.chartData.x,
						boundaryGap: false,
						axisTick: {
							show: false
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							let name = `${params[0].name}月份数据:`;
							// 应报
							let one = params[0];
							// 实报
							let two = params[1];
							return `${name}<br>${one.marker}${one.seriesName}: ${one.value}<br>${two.marker}${two.seriesName}: ${two.value}`
						},
					},
					grid: {
						left: "10px",
						right: "18px",
						bottom: 20,
						top: 40,
						containLabel: true
					},
					yAxis: {
						axisTick: {
							show: false
						}
					},
					legend: {
						top: 10,
						selectedMode: false, // 是否允许点击
						data: ['应报', '实报'],
					},
					series: [{
							name: '应报',
							itemStyle: {
								normal: {
									color: '#FF005A',
									lineStyle: {
										color: '#FF005A',
										width: 2
									}
								}
							},
							smooth: true,
							type: 'line',
							data: this.chartData.y1,
							animationDuration: 2800,
							animationEasing: 'cubicInOut'
						},
						{
							name: '实报',
							smooth: true,
							type: 'line',
							itemStyle: {
								normal: {
									color: '#3888fa',
									lineStyle: {
										color: '#3888fa',
										width: 2
									},
									areaStyle: {
										color: '#f3f8ff'
									}
								}
							},
							data: this.chartData.y2,
							animationDuration: 2800,
							animationEasing: 'quadraticOut'
						}
					]
				})

				var that = this;

				this.eChartsTimer = setInterval(function() {
					let len = that.chartData.x.length;
					if (that.index >= len) {
						that.index = 0;
					}
					that.chart.dispatchAction({
						type: "showTip", // 提示框
						seriesIndex: 0,
						dataIndex: that.index, // 第 lightIndex 柱子高亮
					});
					that.index += 1
				}, 2000);
			},
		}
	}
</script>